<template>
    <el-container class="jxc_fin_bill_container">
        <el-main>
            <el-card class="box-card">
                <header-template slot="header" ref="header"
                                 :table-ref="tableOptions.ref"
                                 :toolbar_buttons="headerOption.toolbar_buttons"
                                 :toolbar_filter="headerOption.toolbar_filter"
                                 :searchForm="searchForm"
                                 @event="handleHeaderEvent">
                    <template slot="right_search">
                        <div class="search_item">
                            <el-select v-model="searchForm.type" clearable @change="getList(true)"
                                       style="width: 90px;">
                                <el-option label="全部类型" value=""/>
                                <el-option label="收款" value="cash_in"/>
                                <el-option label="付款" value="cash_out"/>
                            </el-select>
                        </div>
                        <div class="search_item">
                            <el-select v-model="searchForm.bill_type" placeholder="请选择"
                                       class="w100" clearable @change="getList(true)">
                                <el-option label="全部收付款类型" value=""/>
                                <el-option v-for="(item, index) in validTypeList" :key="index"
                                           :label="item.display_text" :value="item.value"/>
                            </el-select>
                        </div>
                        <div class="search_item">
                            <el-select v-model="searchForm.audit_state" class="w100" clearable
                                       @change="getList(true)">
                                <el-option label="审核状态" value=""/>
                                <el-option label="待审核" :value="0"/>
                                <el-option label="已审核" :value="1"/>
                            </el-select>
                        </div>
                    </template>
                </header-template>
                <div class="card_content">
                    <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                        @event="handleTableEvent"/>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import provide from "@common/mixins/provide";
import common from "@jxc/utils/common";
import BillForm from "../dialog/BillForm";

export default {
    extends: provide,
    name: "FinBill",
    data() {
        const _this = this;
        return {
            typeList: [],
            searchForm: {
                type: '',
                bill_type: '',
                audit_state: '',
                state: 1,
            },
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: "primary",
                        show: true,
                        permission: 'jxc:fundMnt:save',
                        btnType: 'dropdown',
                        dropdownItems: [
                            { command: 'cash_in', label: '收款单' },
                            { command: 'cash_out', label: '付款单' },
                        ],
                        method: command => {
                            _this.openDialog({ type: command }, 'add');
                        },
                    },
                    {
                        id: "edit",
                        icon: "fa fa-pencil",
                        type: "success",
                        show: true,
                        permission: 'jxc:fundMnt:save',
                        method: () => {
                            _this.openDialog(null, 'edit');
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: "danger",
                        show: true,
                        permission: 'jxc:fundMnt:delete',
                        method: () => {
                            _this.deleteConfirm();
                        },
                    },
                    {
                        id: "audit",
                        label: '审核',
                        icon: "el-icon-top-right",
                        class: 'audit_btn',
                        show: true,
                        permission: 'jxc:fundMnt:audit',
                        method: () => {
                            _this.changeAuditState('audit');
                        },
                    },
                    {
                        id: "reAudit",
                        label: '反审',
                        icon: "el-icon-bottom-left",
                        class: 're_audit_btn',
                        show: true,
                        permission: 'jxc:fundMnt:reAudit',
                        method: () => {
                            _this.changeAuditState('reAudit');
                        },
                    },
                ],
                toolbar_filter: [
                    {type: "text", field: "code", label: `单据编号`},
                ],
            },
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: 'jxcFinBillTable',
                container: '.jxc_fin_bill_container',
                multiSelect: true,
                showSummary: true,
                summaryArray: ["amount"],
                columns: [
                    {
                        label: "审核状态",
                        prop: "audit_state",
                        align: "center",
                        formatter: (row) => {
                            if (_this.$utils.isNotEmpty(row.audit_state) && row.audit_state === 1) {
                                return '已审核';
                            }
                            return '待审核';
                        },
                    },
                    {
                        label: "对账",
                        prop: "pay_req_state",
                        align: "center",
                        width: 70,
                        formatter: (row) => {
                            if (_this.$utils.isNotEmpty(row.pay_req_state) && row.pay_req_state === 1) {
                                return '已生成';
                            }
                            return '未生成';
                        },
                    },
                    {
                        label: "类型",
                        prop: "type_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "收付款类型",
                        prop: "bill_type_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "账单编号",
                        prop: "code",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "账单日期",
                        prop: "the_date",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "往来单位",
                        prop: "related_party_display",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "资金账号",
                        prop: "fund_account_name",
                        align: "center",
                        minWidth: 120,
                    },
                    {
                        label: "账单金额",
                        prop: "amount",
                        align: "right",
                        headerAlign: 'center',
                        footerAlign: 'center',
                        minWidth: 90,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: "经手人",
                        prop: "dealer_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "摘要",
                        prop: "note_info",
                        align: "center",
                    },
                    {
                        label: "部门",
                        prop: "group_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "录入人",
                        prop: "creator_person_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "录入时间",
                        prop: "create_date",
                        align: "center",
                        width: 140,
                    },
                    {
                        label: "审核人",
                        prop: "auditor_person_name",
                        align: "center",
                        minWidth: 90,
                        formatter: (row) => {
                            if (_this.$utils.isNotEmpty(row.audit_state) && row.audit_state === 1) {
                                return row.auditor_person_name;
                            }
                            return '';
                        },
                    },
                    {
                        label: "审核时间",
                        prop: "audit_date",
                        align: "center",
                        width: 140,
                        formatter: (row) => {
                            if (_this.$utils.isNotEmpty(row.audit_state) && row.audit_state === 1) {
                                return row.audit_date;
                            }
                            return '';
                        },
                    },
                ],
                operates: {
                    fixed: "right",
                    count: 2,
                    list: [
                        {
                            id: "info",
                            icon: "fa fa-info-circle",
                            type: "warning ",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "详情",
                            },
                            filter(row) {
                                return row.state === 0 || (row.state === 1 && row.audit_state === 1);
                            },
                            method: (index, row) => {
                                _this.openDialog(row, 'detail');
                            },
                        },
                        {
                            id: "edit",
                            icon: "fa fa-pencil",
                            type: "success",
                            size: "mini",
                            show: true,
                            permission: 'jxc:fundMnt:save',
                            tooltip: {
                                content: "编辑",
                            },
                            filter(row) {
                                if (row.pay_req_state === 1) {
                                    return false;
                                }
                                return row.state === 1 && row.audit_state === 0;
                            },
                            method: (index, row) => {
                                _this.openDialog(row, 'edit');
                            },
                        },
                        {
                            id: "delete",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            size: "mini",
                            show: true,
                            permission: 'jxc:fundMnt:delete',
                            tooltip: {
                                content: "删除",
                            },
                            filter(row) {
                                if (row.pay_req_state === 1) {
                                    return false;
                                }
                                return row.state === 1 && row.audit_state === 0;
                            },
                            method: (index, row) => {
                                _this.deleteConfirm(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    computed: {
        validTypeList() {
            let list = (this.typeList || []).map(item => $.extend({}, item));
            if (this.$utils.isNotEmpty(this.searchForm.type)) {
                list = list.filter(item => item.key2 === this.searchForm.type);
            }
            return list;
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.initAccountTypeList();
            this.getList();
        },
        initAccountTypeList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindCommonParameterValuesByKey, {
                key1: 'jxc_account_type',
            }).then(res => {
                _this.typeList = res.data || [];
            }).catch(() => {
            });
        },
        handleHeaderEvent(event) {
            const _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === 'search') {
                _this.getList(true)
            } else if (event.type === 'refresh') {
                _this.getList(true)
            }
        },
        getList(query) {
            const _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindJxcFinanceFundDetails, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        openDialog(row, type) {
            const _this = this;
            if (type === 'edit' && row == null) {
                if (!_this.checkSelection(_this.selectionList, false)) {
                    return;
                }
                row = _this.selectionList[0];
            }
            let detail = type === 'detail';
            _this.$dialog({
                title: row.type === 'cash_in' ? '收款单' : '付款单',
                width: '1000px',
                component: {
                    value: BillForm,
                    props: {
                        detail,
                        row,
                        type: row.type,
                        typeList: _this.typeList,
                    },
                },
                hideConfirmBtn: detail,
                confirmed() {
                    _this.getList();
                },
            });
        },
        async changeAuditState(type) {
            const _this = this;
            const label = '收付款';
            let list = await common.checkRow(_this, {
                type, label,
                selectionList: _this.selectionList,
                auditCheck: type === 'audit' ? 1 : 0,
                method(selectionList) {
                    let filter = selectionList.filter(item => item.pay_req_state === 1);
                    if (_this.$utils.isNotEmpty(filter)) {
                        let codeList = filter.map(item => item.code);
                        _this.$message.error(`${label}：${codeList.join('、')} 已生成对账，请先删除对账信息`);
                        return false;
                    }
                    return true;
                },
            });
            if (!list) {
                return;
            }
            _this.fetchData(_this.$api.API_ChangeJxcFinanceFundDetailAuditState, {
                sid_list: list.map(item => item.sid),
                state: type === 'audit' ? 1 : -1,
            }).then(() => {
                _this.$message.success(`${type === 'audit' ? '审核' : '反审'}成功！`);
                _this.getList();
            }).catch(() => {
            });
        },
        async deleteConfirm(row) {
            const _this = this;
            const label = '收付款';
            let list = await common.checkRow(_this, {
                type: 'delete', row, label,
                selectionList: _this.selectionList,
                method(selectionList) {
                    let filter = selectionList.filter(item => item.pay_req_state === 1);
                    if (_this.$utils.isNotEmpty(filter)) {
                        let codeList = filter.map(item => item.code);
                        _this.$message.error(`${label}：${codeList.join('、')} 已生成对账，请先删除对账信息`);
                        return false;
                    }
                    return true;
                },
            });
            if (!list) {
                return;
            }
            _this.fetchData(_this.$api.API_DeleteJxcFinanceFundDetails, {
                sid_list: list.map(item => item.sid),
            }).then(() => {
                _this.$message.success('删除成功！');
                _this.getList();
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_fin_bill_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
